<template>
    <el-menu
      active-text-color="#ffd04b"
      background-color="#6c7379"
      class="el-menu-vertical-demo"
      :default-active="$route.path"
      text-color="#fff"
        :collapse="store.state.HomeModules.navBool"
      @open="handleOpen"
      @close="handleClose"
      router
      unique-opened="true"
      
    >
    <!-- 带下拉的导航 -->
    <!-- 循环路由数据 并且判断是否有二级菜单 -->
    <template v-for="item in router.options.routes[2].children" :key="item.path">
      <el-sub-menu :index="item.path" v-if="item.children">
        <template #title>
          <el-icon>
            <Picture v-if="item.meta.title === '轮播图管理'" />
            <Goods v-else-if="item.meta.title === '商品管理'" />
            <User v-else-if="item.meta.title === '账户管理'" />
          </el-icon>
          <!-- 添加展示数据 -->
          <span>{{ item.meta.title }}</span>
        </template>
        <!-- 二级菜单 -->
        <el-menu-item-group v-for="val in item.children" :key="val.path">
          <!-- 设置index为path路径 -->
          <el-menu-item :index="val.path">{{ val.meta.title }}</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <!-- 不带下拉的列表 -->
      <el-menu-item :index="item.path" v-else>
        <el-icon>
          <House v-if="item.meta.title === '首页'" />
          <Setting v-else-if="item.meta.title === '设置'" />
        </el-icon>
        <span>{{ item.meta.title }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script lang="ts" setup>

import {
  Document,
  Menu as IconMenu,
  Location,
  Edit,
  House,
  Picture,
  Goods,
  User,
  Star,
  Collection,
  Setting,
} from '@element-plus/icons-vue';
import { useStore } from 'vuex';
import { onMounted, watch } from "vue"
// 获取路由信息
import { useRoute, useRouter } from "vue-router";


const store = useStore();
//获取当前路由的信息
const route = useRoute();
const router = useRouter();

onMounted(() => {
  console.log('onMounted', router.options.routes[2].children);

})

const handleOpen = (key: string, keyPath: string[]) => {
  // console.log('handleOpen',key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  // console.log('handleClose',key, keyPath)
}

// 当请求的url的path变化,自动调用
watch(() => route.path, () => console.log('1', router))




</script>

<style scoped>
.el-menu {
  height: 100%;
}
</style>